<template>
	<view class="main">
		<view class="login-popup">
			<view style="margin-bottom: 20rpx;">
				完善商户信息
			</view>
			<view class="cell">
				<text class="label">头像</text>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true">
					<image slot="right-icon" class="avatar" :src="avatarUrl" mode="widthFix"></image>
				</button>
			</view>
			<view class="cell">
				<text class="label">昵称</text>
				<input type="nickname" style="width: 100%;" class="weui-input" placeholder="请输入昵称" v-model="name" />
			</view>
			<view class="cell">
				<text class="label">手机号</text>
				<view style="width: 250rpx;">
					<button v-if="!phoneNumber" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="get-phone-button">获取手机号码</button>
					<view style="text-align: right;" v-else>
						{{phoneNumber}}
					</view>
				</view>
			</view>
			<view class="cell">
				<text class="label">密码</text>
				<input type="password" style="width: 100%;" v-model="password"  placeholder="请输入密码" border="bottom" maxlength="18"
					clearable/>
			</view>
		</view>
		<!-- <view class="to-login">
			<view class="to-login-text" @click="toLogin()">使用账号登录</view>
		</view> -->
		<view class="submit-but">
			<view class="but">
				<u-button type="primary" shape="circle" @click="submit()" text="保存"></u-button>
			</view>
		</view>
		<ywkefu></ywkefu>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$configPath.baseURL,
				baseAvatarUrl: '/image/common/member-header-image-default.svg',
				avatarUrl: this.$configPath.staticFileUrl.concat('/image/common/member-header-image-default.svg'),
				name: '',
				phoneNumber: '',
				password:'',
				fileUrl: '',
				userInfo: [],
				type: 0,
				storageKeyEnum: this.$storageKeyEnum,
			}
		},
		onLoad(options) {
			if (options.type != null) {
				this.type = options.type;
			} else {
				this.type = 0;
			}
			this.userInfo = this.$store.getters.GET_VALUE("GET_USER_INFO");
			this.cancel();
		},
		onShow() {
			uni.hideHomeButton()
		},
		methods: {

			toLogin() {
				uni.removeStorageSync(this.storageKeyEnum.home_icon_list);
				uni.removeStorageSync(this.storageKeyEnum.twisted_egg_bindingGoodsList);
				uni.removeStorageSync(this.storageKeyEnum.username);
				uni.removeStorageSync(this.storageKeyEnum.password);
				this.$store.commit("SET_TOKEN", '')
				this.$store.commit("SET_USER_INFO", '');
				uni.reLaunch({
					url: '/pages-other/login/login'
				});
			},
			getPhoneNumber(e) {
				if (e.detail.errMsg == "getPhoneNumber:fail:user deny" || e.detail.errMsg ==
					"getPhoneNumber:fail user deny") {
					uni.showModal({
						showCancel: false,
						title: '温馨提示',
						content: '需获取手机号才能正常使用系统',
					});
				} else {
					let param = {
						code: e.detail.code,
						appId: uni.getAccountInfoSync().miniProgram.appId
					}
					this.$api('weChatApplet.getPhoneNumber', param).then(res => {
						if (res.status == 0) {
							this.phoneNumber = res.data;
						} else {
							getApp().err('获取手机号码失败:' + res.msg);
						}
					})
				}
			},
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl;
				this.fileUrl = e.detail.avatarUrl;
			},
			cancel() {
				this.avatarUrl = this.$configPath.staticFileUrl + this.baseAvatarUrl;
				this.name = '';
				this.phoneNumber = '';
			},
			submit() {

				let params = {};
				if (this.avatarUrl == this.$configPath.staticFileUrl + this.baseAvatarUrl) {
					getApp().err('请上传头像');
					return;
				}

				let reg = /^\s*$/
				if (reg.test(this.name)) {
					getApp().err('昵称不能为空');
					return;
				} else {
					params.nickname = this.name
				}

				if (!this.phoneNumber) {
					getApp().err('请获取手机号');
					return;
				} else {
					params.mobile = this.phoneNumber
					params.username = this.phoneNumber
				}
				if (this.$u.test.isEmpty(this.password)) {
					this.$helpers.toast('请输入密码');
					return
				}else{
					params.password = this.password
				}
				uni.showLoading({
					title: '保存中...'
				})

				uni.uploadFile({
					url: this.baseUrl + '/api/upload/uploadImageToFTP',
					filePath: this.fileUrl,
					name: 'image',
					header: {
						Authorization: 'Bearer ' + this.$store.getters.GET_VALUE("GET_TOKEN")
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)
						if (res.status == 0) {
							this.avatarUrl = this.$configPath.imgURL + res.data.keyRes;
							params.headImgUrl = this.avatarUrl
							this.updateUserInfo(params)
						} else {
							uni.hideLoading();
							this.$helpers.toast(uploadFileRes.msg);
						}
					},
					fail: (error) => {
						uni.hideLoading();
						this.$helpers.toast(error.errMsg);
					},
				})
			},

			updateUserInfo(params) {
				this.$api('user.updateUserInfo', params).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						this.userInfo.name = params.nickname;
						this.userInfo.headImgUrl = params.headImgUrl;
						this.userInfo.mobile = params.mobile;
						this.userInfo.username = params.mobile;
						this.$store.commit("SET_USER_INFO", this.userInfo);
						this.$helpers.toast("保存成功", 'success', 1000, true, () => {
							if (this.type == 0) {
								uni.navigateBack();
							} else {
								uni.redirectTo({
									url: '/pages-qualification/add/settlement-type'
								})
							}
						})
					} else if (res.status == 1000 || res.status == "1000") {
						uni.showModal({
							title: '保存不成功',
							content: res.msg,
							success(res) {
								if (res.confirm) {
									this.toLogin()
								}
							}
						});
					} else {
						getApp().err("保存不成功，" + res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit-but {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: 80rpx;

		.but {
			margin: 0 60rpx;
		}
	}

	.to-login {
		text-align: center;
		margin-top: 20rpx;

		.to-login-text {
			font-size: 30rpx;
			color: #6072FF;
		}
	}

	.main {
		background-color: #fff;
		height: 100vh;
	}

	.get-phone-button {
		border-radius: 200rpx;
		padding: 0 12rpx;
		background-color: $u-primary;
		font-size: 28rpx;
		height: 40px;
		line-height: 40px;
		color: #FFFFFF;
	}

	.login-popup {
		height: auto;
		padding: 50rpx 40rpx 20rpx;


		.title {
			height: 50rpx;
			text-align: center;
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}

		.cell {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			font-size: $f-base;

			.label {
				width: 200rpx;
			}

			.avatar-wrapper {
				border: 0;
				margin: 0;
				padding: 0;
				width: 100%;
				height: 80rpx;
				text-align: right;

				.avatar {
					border-radius: 50%;
					width: 80rpx;
					height: 80rpx;
				}
			}

			input {
				min-height: 50rpx;
				text-align: right;
			}

		}

	}
</style>
